<template>
  <el-radio-group v-model="radio">
    <el-radio-button @click="onTagChange('全部')" label="全部" value="全部" />
    <el-radio-button @click="onTagChange('1')" label="已支付" value="已支付" />
    <el-radio-button @click="onTagChange('2')" label="未支付" value="未支付" />
    <el-radio-button @click="onTagChange('3')" label="已取消" value="已取消" />
    <el-radio-button @click="onTagChange('4')" label="已退款" value="已退款" />
  </el-radio-group>

  <div class="list-content">
    <div
      class="order-item-view"
      v-for="(item, index) in orderData"
      :key="index"
    >
      <div v-if="item != null">
        <div class="header flex-view">
          <div class="left">
            <span class="text">订单号</span>
            <span class="num mg-4">#</span>
            <span class="num">{{ item.orderNumber }}</span>
            <span class="time">{{ getFormatTime(item.orderTime, true) }}</span>
          </div>
          <div class="right">
            <el-button
              v-if="item.status == 1"
              type="primary"
              size="small"
              style="margin-right: 24px"
              @click="refundOrder(item)"
              >退款</el-button
            >
            <el-button
              v-if="item.status == 2"
              type="primary"
              size="small"
              style="margin-right: 24px"
              @click="cancelOrder(item)"
              >取消</el-button
            >
            <el-button
              v-if="item.status == 2"
              type="primary"
              size="small"
              style="margin-right: 24px"
              @click="payOrder(item)"
              >支付</el-button
            >
            <span class="text">订单状态</span>
            <span class="state">{{
              item.status === "1"
                ? "已支付"
                : item.status === "2"
                  ? "未支付"
                  : item.status === "3"
                    ? "已取消"
                    : "已退款"
            }}</span>
          </div>
        </div>
        <div class="content flex-view">
          <div class="left-list">
            <div class="list-item flex-view">
              <img :src="item.cover" class="thing-img" />
              <div class="detail flex-between flex-view">
                <div class="flex-between flex-top flex-view">
                  <h2 class="name">{{ item.title }}</h2>
                  <span class="count">x{{ item.amount }}</span>
                </div>
                <div class="flex-between flex-center flex-view">
                  <span class="type"></span>
                  <span class="price">¥{{ item.price }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="right-info">
            <p class="title">收货人</p>
            <p class="name">
              {{ item.receiverName }}
            </p>
            <p class="title">收货地址</p>
            <p class="name">{{ item.receiverAddress }}</p>
            <p class="title">电话</p>
            <p class="name">{{ item.receiverPhone }}</p>
            <!-- <p class="title">备注信息</p>
              <p class="text">{{ item.remark }}</p> -->
          </div>
        </div>
        <div class="bottom flex-view">
          <div class="left">
            <span class="text">共{{ item.amount }}件商品</span>
            <span class="open" @click="navigateToProduct(item.thingId)"
              >商品详情</span
            >
          </div>
          <div class="right flex-view">
            <span class="text">总计</span>
            <span class="num">¥ {{ item.totalSum }}</span>
            <!-- <span class="text">优惠</span> -->
            <!-- <span class="num">¥0</span> -->
            <span class="text">实际支付</span>
            <span class="money">¥ {{ item.totalSum }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        :page-sizes="[1, 2, 5, 20, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        :default-page-size="pagination.size"
        @change="onPaginationChange"
      />
    </div>
  </div>
</template>

<script setup>
import { getFormatTime } from "@/apis/utility";
import {
  orderPage,
  orderDeleteByUserId,
  orderDeleteBatch,
  orderAdd,
  orderEdit,
} from "@/apis/user/order";
import { reactive, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();
// 存储订单数据
const orderData = ref([]);

// 分页
const pagination = reactive({
  page: 1,
  size: 2,
  total: 0,
});

// 状态： 1 已支付 2 未支付 3 已取消 4 已退款

// 搜索输入框搜索条件
const search = reactive({
  id: "",
  orderNumber: "",
  status: "",
  orderTime: "",
  payTime: "",
  refundTime: "",
  cancelTime: "",
  status: "",
  thingId: "",
  userId: "",
  receiverAddress: "",
  receiverName: "",
  receiverPhone: "",
  totalSum: "",
  remark: "",
  username: "",
  title: "",
  cover: "",
  price: "",
});

// 过滤对应的条件
const filter = ref({});

// 存储排序字段
const orders = reactive({
  column: "id",
  isAsc: true,
});

// 获取数据
const getOrderPage = async () => {
  await orderPage(
    {
      filter: filter,
      search: search,
      orders: [orders],
    },
    pagination.page,
    pagination.size
  ).then((result) => {
    orderData.value = result.data.records;
    pagination.total = result.data.total;
    // console.log(result.data.records);
  });
};

// 实现跳转商品详情页,传递路径参数
const navigateToProduct = (productId) => {
  router.push({
    name: "productdetail",
    params: { productId: productId },
  });
};

// 实现标签切换
const radio = ref("全部");

// 点击标签页的触发函数
const onTagChange = (key) => {
  if (key != "全部") {
    search.status = key;
  } else {
    search.status = "";
  }
  getOrderPage();
  // console.log(key);
};

// 订单退款
const refundOrder = async (item) => {
  const newOrder = reactive({});
  Object.assign(newOrder, item);
  newOrder.status = 4;

  await orderEdit(newOrder).then((result) => {
    console.log(result);
  });
  getOrderPage();
  // console.log(newOrder);
};

// 取消订单
const cancelOrder = async (item) => {
  const newOrder = reactive({});
  Object.assign(newOrder, item);
  newOrder.status = 3;
  await orderEdit(newOrder).then((result) => {
    // console.log(result);
  });
  getOrderPage();
  // console.log(newOrder);
};

// 支付订单
const payOrder = async (item) => {
  const newOrder = reactive({});
  Object.assign(newOrder, item);
  confirmPay(newOrder);
  getOrderPage();
};

// 确认付款消息
const confirmPay = (item) => {
  ElMessageBox.confirm("进行支付", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      ElMessage({
        type: "success",
        message: "订单提交并支付成功",
      });
      // 确认支付
      item.status = 1;
      try {
        await orderEdit(item);
      } catch (error) {
        console.error(error);
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "支付取消",
      });
      // 没有支付
    });
};

// 页面加载时执行
onMounted(() => {
  getOrderPage();
});


const onPaginationChange = (currentPage, pageSize) => {
  pagination.page = currentPage;
  pagination.size = pageSize;
  getOrderPage();
};
</script>

<style lang="less" scoped>
.flex-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.content-list {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;

  .list-title {
    color: #152844;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    height: 24px;
    margin-bottom: 4px;
  }
}

.order-item-view {
  background: #f7f9fb;
  border-radius: 4px;
  padding: 16px;
  margin-top: 12px;

  .header {
    border-bottom: 1px solid #cedce4;
    padding-bottom: 12px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 14px;

    .text {
      color: #6f6f6f;
    }

    .mg-4 {
      margin-left: 4px;
    }

    .num {
      font-weight: 500;
      color: #152844;
    }

    .num {
      font-weight: 500;
      color: #152844;
    }

    .time {
      margin-left: 16px;
      color: #a1adc5;
    }

    .state {
      color: #ff7b31;
      font-weight: 600;
      margin-left: 10px;
    }
  }

  .content {
    padding: 12px 0;
    overflow: hidden;

    .left-list {
      overflow: hidden;
      height: 132px;
      -webkit-box-flex: 2;
      -ms-flex: 2;
      flex: 2;
      padding-right: 16px;

      .list-item {
        height: 60px;
        margin-bottom: 12px;
        overflow: hidden;
        cursor: pointer;
      }

      .thing-img {
        width: 48px;
        height: 100%;
        margin-right: 12px;
      }

      .detail {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
      }

      .flex-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      .flex-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      .flex-top {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
      }

      .name {
        color: #152844;
        font-weight: 600;
        font-size: 14px;
        line-height: 18px;
      }

      .count {
        color: #484848;
        font-size: 12px;
      }

      .flex-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      .flex-center {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }

      .type {
        color: #6f6f6f;
        font-size: 12px;
      }

      .price {
        color: #ff7b31;
        font-weight: 600;
        font-size: 14px;
      }
    }

    .right-info {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-left: 1px solid #cedce4;
      padding-left: 12px;
      line-height: 22px;
      font-size: 14px;

      .title {
        color: #6f6f6f;
      }

      .name {
        color: #152844;
      }

      .text {
        color: #484848;
      }

      .mg {
        margin-bottom: 4px;
      }
    }
  }

  .bottom {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid #cedce4;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 14px;
    padding-top: 14px;

    .text {
      color: #6f6f6f;
    }

    .open {
      color: #4684e2;
      margin-left: 8px;
      cursor: pointer;
    }

    .right {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .text {
      color: #6f6f6f;
    }

    .num {
      color: #152844;
      margin: 0 40px 0 8px;
    }

    .money {
      font-weight: 600;
      font-size: 18px;
      color: #ff7b31;
      margin-left: 8px;
    }
  }
}

.order-item-view:first-child {
  margin-top: 16px;
}
</style>
